import React, { useState } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Text,
  TouchableOpacity
} from 'react-native';

var path = require('path');

function BigCard (props) {
  const { navigation, detail, type = 'big' } = props;

  const toClothingType = () => {
    navigation.navigate('ClothingType');
  }

  if (type == 'small') {
    return (
      <View style={[styles.card, styles.smallCard]}>
        {
          detail.length ? detail.map((item, index) => {
            return (
              <View style={[styles.box, index % 2 == 0 ? styles.boxSingle : '']} key={index}>
                <View style={styles.boxTop}>
                  <Text style={styles.topTitle}>{item.title}</Text>
                </View>
                <View style={styles.boxBottom}>
                  <TouchableOpacity activeOpacity={0.9} onPress={toClothingType}>
                    <Image style={styles.bannerImg} source={item.img} />
                  </TouchableOpacity>
                </View>
              </View>
            )
          }) : null
        }
      </View>
    )
  } else {

    return (
      <View style={styles.card}>
        <View style={styles.top}>
          <Text style={styles.topTitle}>{detail.title}</Text>
        </View>
        <View style={[styles.bottom, { height: type === 'big' ? 335 : 160 }]}>
          <TouchableOpacity activeOpacity={0.9} onPress={toClothingType}>
            <Image style={styles.bannerImg} source={detail.img} />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  card: {
    width: 335
  },
  smallCard: {
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    alignItems: 'center',
    flexWrap: 'wrap'
  },
  boxSingle: {
    marginRight: 15
  },
  box: {
    width: 160,
    marginBottom: 19
  },
  top: {
    width: '100%',
  },
  topTitle: {
    fontSize: 18,
    color: 'rgb(0, 0, 0)',
    fontFamily: 'SF Pro Display',
    fontSize: 21,
    lineHeight: 31,
    letterSpacing: 0.25200000405311584,
    textAlign: 'left'
  },
  bannerImg: {
    width: '100%',
    height: '100%',
    borderRadius: 6
  },
  bottom: {
    width: '100%',
    marginTop: 13,
    marginBottom: 19
  },
  boxBottom: {
    height: 160,
    marginTop: 13
  }
})

export default BigCard;